<template>
  <div>
    <div class="top"></div>
    <van-row type="flex" justify="center">
      <div class="headImg">
        <img src="../../assets/cover.jpg">
      </div>
    </van-row>

    <van-panel >
      <van-field
        v-model="userName"
        type="text"
        label="用户名"
        left-icon="contact"
        placeholder="请输入手机号"
        @blur="userNameVerify()"
      />
      <van-field
        v-model="userPsd"
        type="password"
        label="密码"
        left-icon="records"
        placeholder="请输入密码"
        @blur="userPsdVerify()"
      />
      <van-field
        v-model="userPsd1"
        type="password"
        label="确认密码"
        left-icon="records"
        placeholder="请确认密码"
        @blur="userPsdVerify1()"
      />
      <div style="margin-top: 20px;margin-bottom: 20px;margin-left: 10px">请选择密保</div>
      <van-checkbox-group v-model="result" :max="1">
        <van-cell-group>
          <van-cell
            v-for="(item,index) in list"
            clickable
            :key="index"
            :title="`密保 ${item}`"
          >
            <van-checkbox :name="item" ref="checkboxes" />
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <van-field
        v-model="userText"
        type="text"
        label="密保答案"
        placeholder="请输入密保答案"
      />
      <div slot="footer" style="margin-bottom: 20px">
        <van-row type="flex" justify="space-around">
          <van-button size="normal" type="primary" style="cursor: pointer" @click=" register()">确认注册</van-button>
          <van-button size="normal" type="primary" style="cursor: pointer" @click="goLogin()">登录</van-button>
        </van-row>
      </div>
    </van-panel>
    <div class="bottom"></div>
  </div>
</template>

<script>
  import {baseUrl} from '../constants'
export default {
  name: 'loginUser',
  data () {
    return {
      userName: '',
      userPsd: '',
      userPsd1: '',
      list: ['对你影响最深的人', '你高中班主任姓名', '你最爱的人的姓名'],
      result: [],
      userText: '',
      canSubmit:false
    }
  },
  methods: {
    //用户注册
    register(){
      if(this.canSubmit){
        if(this.result[0]){
          let index;
          for(let i = 0;i<this.list.length;i++){
             if(this.result[0]==this.list[i]);{
               index=i;
               break;
            }
          }
          if(this.userText){
            //进行提交
            let data = {
              userName:this.userName,
              userPsd: this.userPsd,
              problemId:index,
              problemAnswer:this.userText
            }
            this.axios.post(baseUrl.serverUrl+'/user',data).then(res=>{
              if(res.data.status==1){
                this.$dialog.alert({
                  message:'注册成功即将跳到登录页面'
                })
                this.$router.push('/user');
              }
            })
          }else {
            this.$dialog.alert({
              message:'请您填写密保答案，方便您找回密码'
            })
          }
        }else {
          this.$dialog.alert({
            message:'请您选择密保问题'
          })
        }

      }else {
        this.$dialog.alert({
          message:'请您按照相关提示完成用户名和密码'
        })
      }
    },
    //去到登录页面
    goLogin(){
      this.$dialog.confirm({
        message: '即将离开本页去到登录页面'
      }).then(() => {
        // on confirm
        this.$router.push('/user');
      }).catch(() => {
        // on cancel
      });
    },
    //用户登录名称验证
    userNameVerify(){
      let re = /^1\d{10}$/;
      if (!re.test(this.userName)) {
        this.$dialog.alert({
          message: '请输入正确的手机号'
        });
        this.canSubmit = false;
      }else {
        this.canSubmit = true;
      }
    },
    //密码验证
    userPsdVerify(){
        if(!(/^[A-Za-z0-9]{6,16}$/.test(this.userPsd))){
          this.$dialog.alert({
            message: '密码要求至少包含字母，符号或数字中的两项且长度超过6位'
          });
          this.canSubmit=false;
        }else{
          this.canSubmit = true;
        }
    },
    //2次密码相同验证
    userPsdVerify1(){
      if(this.userPsd!==this.userPsd1){
        this.$dialog.alert({
          message: '您输出的2次密码不相同，请更正'
        });
         this.canSubmit = false;
      }else this.canSubmit = true;
    }

  }
}
</script>

<style scoped>
.headImg {
  width: 100%;
  height: 400px;
}
.headImg img {
  width: 100%;
  height: 100%;
}
</style>
